import { useEffect, useState } from 'react'
import { getStatistics1, getCardList } from '@/api/home'
import { Home } from '@/types/api'
import { Col, Row, Card, Tag, Divider, Flex } from 'antd'
import EChartItem from '@/components/Index/EChartItem'
import HomeCard from '@/components/Index/HomeCard'
import HomeNav from '@/components/Index/HomeNav'
function Index() {
  const [panels, setPanels] = useState<Home.panelItem[]>([])
  const [cardList, setCardList] = useState<Home.CardItem[]>([])
  const [goodsList, setGoodsList] = useState<Home.CardItem[]>([])
  useEffect(() => {
    getData()
  }, [])
  const getData = () => {
    getStatistics1()
      .then(res => {
        if (res.status === 200) {
          setPanels(res.data.panels)
        } else {
          console.log(res)
        }
      })
      .catch(err => {
        console.log(err)
      })
    getCardList().then(res => {
      if (res.status === 200) {
        setCardList(res.data.order)
        setGoodsList(res.data.goods)
      }
    })
  }
  return (
    <>
      <Row gutter={20} style={{ marginBottom: 20 }}>
        {panels.map((item, index) => {
          return (
            <Col key={index} span={6}>
              <Card title={item.title} hoverable extra={<Tag color={item.unitColor === 'danger' ? 'error' : item.unitColor}>{item.unit}</Tag>}>
                <h1>{item.value}</h1>
                <Divider />
                <Flex justify='space-between'>
                  <p>{item.subTitle}</p>
                  <p>{item.subValue}</p>
                </Flex>
              </Card>
            </Col>
          )
        })}
      </Row>
      <HomeNav></HomeNav>
      <Row gutter={20} style={{ marginTop: 20 }}>
        <Col span={12}>
          <EChartItem />
        </Col>
        <Col span={12}>
          <HomeCard title='交易提示' tip='需要立即处理的交易订单' dataList={cardList}></HomeCard>
          <HomeCard title='店铺及商品提示' tip='店铺及商品提示' dataList={goodsList}></HomeCard>
        </Col>
      </Row>
    </>
  )
}
export default Index
